<template>
	<view class="lucky-bag-all">
		<view class="lucky-bag_today">
			<view class="">
				<image :src="today_speak" mode=""></image>
				<image :src="explain_gold" mode="" style=""></image>
			</view>
			<view class="">
				<view class="">
					<rich-text :nodes="info.blessing_today"></rich-text>
					<!-- {{arawd.write}} -->
				</view>
				<!-- <view class="" style="margin-top: 20upx;">
					总有一段话，一直住在心里；茫茫人潮中，只有朋友惺惺相惜。
				</view>
				<view class="" style="margin-top: 20upx;">
					天冷了，你要好好保重自己！
				</view> -->
			</view>
		</view>
		<view class="double-award">
			<view class="first-child">
				<image :src="Double_reward" mode=""></image>
			</view>
			<view class="red-card-money" style="display: flex;justify-content: space-between;" v-if="info.reward.red_envelope!=0">
				<view class="red-card-money-left" style="display: flex;">
					<image :src="lucky_red_packet" mode="" style="width: 90upx;height: 90upx;"></image>
					<view class="" style="margin-left: 20upx;">
						<text style="font-size: 28upx;color: #333;margin-top: 6upx;">现金红包</text>
						<text style="color: #999999;font-size: 24upx;margin-top: 4upx;">最低翻1.5倍，最高10倍</text>
					</view>
				</view>
				<view class="">
					{{info.reward.red_envelope}}
				</view>
			</view>
			<view :class="info.reward.red_envelope!=0?'red-card-money value':'red-card-money value marginT'" style="display: flex;justify-content: space-between;">
				<view class="red-card-money-left" style="display: flex;">
					<image :src="lucky_Achievement" mode="" style="width: 90upx;height: 90upx;"></image>
					<view class="" style="margin-left: 20upx;">
						<text style="font-size: 28upx;color: #333;margin-top: 6upx;">成就值</text>
						<text style="color: #999999;font-size: 24upx;margin-top: 4upx;">最低翻1.5倍，最高10倍</text>
					</view>
				</view>
				<view class="">
					{{info.reward.achievement_value}}
				</view>
			</view>
			<!-- <view class="common double-award-video" @click="toAdVideo">
				看视频立刻翻倍奖励
			</view> -->
			<view class="common invite-riddle" @click="toLuckyCard">
				邀请好友抢福袋奖励翻倍
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				replyId:'',
				info:{
					blessing_today: '',
					reward: {
						achievement_value: 0,
						red_envelope: 0
					}
				},
				token: this.$store.getters.getToken,
				today_speak: this.$imgUrl+'img/riddle/today_speak.png',
				explain_gold: this.$imgUrl+'img/riddle/explain_gold.png',
				Double_reward: this.$imgUrl+'img/riddle/Double_reward.png',
				lucky_red_packet: this.$imgUrl+'img/riddle/lucky_red_packet.png',
				lucky_Achievement: this.$imgUrl+'img/riddle/lucky_Achievement.png',
				hasDouble: false
			}
		},
		onLoad(option) {
			this.replyId = option.id
		},
		onShow() {
			if(this.$store.state.canDoublePrize&&!this.hasDouble) {//翻倍奖励一次
				console.log('翻倍奖励1111111111111')
				this.hasDouble = true
				this.$store.commit('updataCanDoublePrize',false)
			}
			this.getLuckBag()
		},
		methods:{
			getLuckBag(){
				let data = {
					token:this.token,
				}
				this.$api.openLuckBag(data).then(res => {
					console.log('获取幸运福袋数据',res)
					if(res.status){
						this.info = res.data
					}
				}).catch(err => {
					console.log('获取幸运福袋数据',err)
				})
			},
			toLuckyCard() {
				uni.navigateTo({
					url: '../luckyCard/luckyCard?result=success'
				})
			},
			// 去看广告
			toAdVideo() {
				uni.navigateTo({
					url: '../advertVideo/advertVideo'
				})
			}
		}
	}
</script>

<style>
	.lucky-bag-all{
		width: 100%;
		height: 100%;
		position: relative;
		background:url(https://lightplanet.tuanhaoke.cn/img/riddle/lucky_bag_bg.png);
		background-size: 100% 100%;
		padding: 0 30upx;
		padding-top: 208upx;
		box-sizing: border-box;
	}
	.lucky-bag_today{
		width: 100%;
		height: 400upx;
		background: #fff;
		border: 5px solid #F9C015;
		position: relative;
		border-radius: 16upx;
		padding: 0 40upx;
		box-sizing: border-box;
	}
	.lucky-bag_today>view:first-child>image:first-child{
		width: 390upx;
		height: 80upx;
		position: absolute;
		top: -20upx;left: 50%;
		transform: translate(-50%,0);
	}
	.lucky-bag_today>view:first-child>image:last-child{
		width: 68upx;
		height: 68upx;
		position: absolute;
		top: -34upx;right: 10upx;
	}
	.lucky-bag_today>view:last-child{
		margin-top: 102upx;
		color: #9E5800;
		font-size: 30upx;
		line-height: 42upx;
	}
	.double-award{
		width: 98%;
		height: 666upx;
		border: 5px solid #F9C015;
		background: #fff;
		position: relative;
		margin-top: 52upx;
		border-radius: 16upx;
		margin-bottom: 104upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.double-award .first-child>image{
		width: 390upx;
		height: 80upx;
		position: absolute;
		top: -20upx;left: 50%;
		transform: translate(-50%,0);
	}
	.marginT{
		margin-top: 190upx!important;
	}
	.red-card-money{
		width: 100%;
		height: 130upx;
		border-top: 0.5px solid #DEDEDE;
		border-bottom: 0.5px solid #DEDEDE;
		margin-top: 110upx;
		padding: 20upx 0;
		box-sizing: border-box;
	}
	.value{
		margin-top: 0;
		border-top: none;
	}
	.red-card-money .red-card-money-left text{
		display: block;
	}
	.red-card-money>view:last-child{
		height: 48upx;
		color: #FF5C46;
		font-size: 34upx;
		margin-top: 22upx;
		text-align: center;
		font-weight: 550;
	}
	.common{
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 90upx auto;
		border-radius: 40upx;
		font-size: 30upx;
	}
	.double-award-video{
		background: linear-gradient(#CBEC00,#00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(85, 166, 0, 0.29);
		color: #fff;
	}	
	.invite-riddle{
		border: 1px solid #00A66A;
		color: #00A66A;
		font-weight: 550;
	}
</style>